<!-- 
  添加点赞与取消点赞：需求详情
 -->
<template>
<div class="collect" @click.stop="handleLike" >
    <input type="text" v-model="haNum" style="display:none">
    <span class="btn" :class="isLike==1?'btn-a':''"></span>
    <span class="txt">{{isLike==1?$t('liked'):$t('like')}}</span>
</div>
</template>

<script>
import {
    likeDemand,
    cancelLikeDemand
} from "@/api/like"
export default {
    computed: {
        id() {
            return this.$route.params.id || ''
        },
        detail() {
            return this.$store.state.seo.pageContent
        },
    },
    data() {
        return {
            haNum:0,
            isLike:0
        }
    },
    mounted(){
        this.isLike=this.detail?this.detail.isLike:0
    },
    methods: {
        handleLike() {
            if (!this.userInfo) {
                this.$modal.confirm(this.$t("tip-login"),this.locale).then(() =>{
                    this.go2Login()
                })
                return;
            }
            // 未收藏进行收藏
            if (this.isLike != 1) {
                this.isLike=1
                this.handleLikeAdd()
            } else {
                this.handleLikeCancel()
                this.isLike=0
            }
            this.haNum++
        },
        // 收藏 - 产品
        handleLikeAdd() {
            this.invoke(likeDemand,this.id).then(res => {
                if (res&&res.code==200) {
                    this.$message.success(this.$t("like-success"))
                }
            });
        },
        // 收藏 - 产品 - 取消
        handleLikeCancel() {
            this.invoke(cancelLikeDemand, this.id).then(res => {
                if (res&&res.code==200) {
                    this.$message.info(this.$t("like-cancel"))
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.collect {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .btn {
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
        width: 24px;
        height: 24px;
        background-image: url('@/assets/img/icon_like.svg');

        &-a {
            background-image: url('@/assets/img/icon_like-a.svg');
        }
    }
    .txt{
        font-size: 18px;
        margin-left: 10px;
        position: relative;
        top:2px;
        color: #666;
        white-space: nowrap;
    }
}
</style>
<style lang="scss" scoped>
@media (min-width:768px) and (max-width:1570px) {
    .collect {
        .btn {
            width: 16px;
            height: 16px;
        }
        .txt {
            font-size: 14px;
            top:0;
        }
    }
}
</style>